$shadow:
  0 8px 25px -5px rgba(0, 0, 0, 0.1),
  0 8px 10px -6px rgba(0, 0, 0, 0.1);
$hover-shadow: 0 4px 12px -2px rgba(0, 0, 0, 0.05);
$transition: all 0.2s cubic-bezier(0.25, 0.46, 0.45, 0.94);
$submenu-transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);

.menu-wrapper {
  align-items: flex-start;
  display: flex;
  height: 100%;
  justify-content: flex-start;
  width: 100%;
  outline: 0;
  z-index: 9999;
  padding: 8px;
}

.sub-menu-wrapper {
  min-width: 180px;
  background: var(--menu-background);
  border-radius: 8px;
  box-shadow: $shadow;
  border: 1px solid rgba(0, 0, 0, 0.05);
  z-index: 50000;

  &.slide-out {
    position: absolute;
    left: 102%;
    top: 0;
  }

  &.accordion {
    position: relative;
    width: 99%;
    margin-left: auto;
    max-height: 900px;
    transition: max-height 0.3s ease;
    border-radius: 6px;
    overflow: visible;

    &.accordion-submenu {
      position: absolute !important;
      left: 100% !important;
      top: 0 !important;
      z-index: 50001 !important;
      width: auto !important;
      min-width: 180px !important;
      margin-left: 8px !important;
      overflow: visible !important;
      box-shadow: $shadow !important;
      border-radius: 8px !important;
      background: var(--menu-background) !important;
    }
  }
}

.chev-icon {
  width: 1.5rem;
  height: 1.5rem;
  display: block;
  transition: $transition;
  opacity: 0.7;

  svg {
    width: 100%;
    height: 100%;
  }

  &.disabled {
    opacity: 0.3;
  }

  &.show-submenu {
    transform: rotate(90deg);
  }
}

.menu-list {
  align-items: flex-start;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  list-style: none;
  margin: 0;
  padding: 4px;
  width: 100%;
  gap: 2px;

  .name {
    padding-left: 0.75rem;
    font-weight: 500;
    font-size: 0.9rem;
    transition: $transition;

    &.disabled {
      opacity: 0.4;
    }
  }
}

.menu-item-wrapper {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  width: 100%;
  min-height: 2.75rem;
  padding: 0 0.5rem;
  border-radius: 6px;
  transition: $transition;

  &.slide-out {
    .name {
      order: 1;
      flex: 1;
    }

    .chev-icon {
      order: 2;
      margin-left: auto;
    }
  }

  &.accordion {
    .name {
      order: 2;
      flex: 1;
    }

    .chev-icon {
      order: 1;
      margin-right: 0.5rem;
    }
  }
}

.menu-item-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 32px;
  width: 32px;
  padding: 0 8px;
  opacity: 0.8;
  transition: $transition;

  // Ensure SVGs scale properly
  svg {
    width: 100%;
    height: 100%;
  }

  // Ensure images scale properly
  img {
    width: 100%;
    height: 100%;
    object-fit: contain;
  }
}

.menu-list-item {
  align-items: center;
  color: var(--menu-text-color);
  cursor: pointer;
  display: flex;
  font-size: 0.9rem;
  justify-content: flex-start;
  position: relative;
  width: 100%;
  border-radius: 6px;
  transition: $transition;

  &.divider {
    height: 1rem;
    cursor: default;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 4px 0;
  }

  &.accordion {
    flex-direction: column;
    position: relative;

    &.selected:not(.divider) {
      max-height: 900px;
      background-color: var(--hover-background);
    }
  }

  &.slide-out:not(.divider) {
    height: 2.75rem;

    &:hover {
      background-color: var(--hover-background);
      color: var(--text-selected-color);
      box-shadow: $hover-shadow;
    }
  }

  &:first-child {
    border-top-left-radius: 6px;
    border-top-right-radius: 6px;
  }

  &:last-child {
    border-bottom-left-radius: 6px;
    border-bottom-right-radius: 6px;
  }

  &.selected {
    background-color: var(--hover-background);
    color: var(--text-selected-color);
    box-shadow: $hover-shadow;
    /* Enhanced selection styling that works better with focus states */
    position: relative;
    font-weight: 500;

    .menu-item-icon {
      opacity: 1;
    }
  }

  &.highlight {
    border: 2px solid #4f46e5;
  }

  &.flip {
    .name {
      margin-left: auto;
      order: 2;
      padding-left: 0;
      padding-right: 0.75rem;
    }

    .chev-icon {
      margin-left: 0;
      order: 1;
      transform: rotate(-180deg);
    }

    .sub-menu-wrapper {
      &.slide-out {
        left: auto !important;
        right: 102% !important;
      }

      &.accordion.accordion-submenu {
        left: auto !important;
        right: 100% !important;
        margin-left: 0 !important;
        margin-right: 8px !important;
      }
    }

    .menu-item-icon {
      order: 3;
    }
  }

  &.disabled {
    cursor: default;
    opacity: 0.6;

    &:hover {
      background-color: transparent;
      box-shadow: none;
    }
  }
}

.menu-item-divider {
  width: 90%;
  background: rgba(0, 0, 0, 0.08);
  display: block;
  height: 1px;
  margin: 0 auto;
  pointer-events: none;
  border-radius: 1px;
}

@keyframes show {
  0% {
    opacity: 0;
    transform: scale(0.95) translateX(-10px);
  }

  100% {
    opacity: 1;
    transform: scale(1) translateX(0);
  }
}

/* Submenu transitions */
.submenu-enter-active {
  transition: $submenu-transition;
  transition-delay: 0.05s;
}

.submenu-leave-active {
  transition: $submenu-transition;
}

.submenu-enter-from,
.submenu-leave-to {
  opacity: 0;
  transform: scale(0.95) translateX(-8px);
}

.submenu-enter-to,
.submenu-leave-from {
  opacity: 1;
  transform: scale(1) translateX(0);
}

/* Flipped submenu transitions */
.flip .submenu-enter-from,
.flip .submenu-leave-to {
  opacity: 0;
  transform: scale(0.95) translateX(8px); /* Reverse the X translation for flipped menus */
}

.flip .submenu-enter-to,
.flip .submenu-leave-from {
  opacity: 1;
  transform: scale(1) translateX(0);
}

/* Error display styles */
.error-display {
  position: fixed;
  top: 20px;
  right: 20px;
  z-index: 10000;
  max-width: 300px;

  .error-error {
    background: #fee2e2;
    border: 1px solid #fecaca;
    color: #991b1b;
    padding: 8px 12px;
    border-radius: 6px;
    margin-bottom: 4px;
    font-size: 0.875rem;
  }

  .error-warning {
    background: #fef3c7;
    border: 1px solid #fde68a;
    color: #92400e;
    padding: 8px 12px;
    border-radius: 6px;
    margin-bottom: 4px;
    font-size: 0.875rem;
  }

  .error-info {
    background: #dbeafe;
    border: 1px solid #93c5fd;
    color: #1e40af;
    padding: 8px 12px;
    border-radius: 6px;
    margin-bottom: 4px;
    font-size: 0.875rem;
  }
}
